<template>
  <div>
    我是app
    <p>{{strObj}}</p>
    <button @click="btnFunc">点击岁数加一</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup () {
    // compositionApi 的入口
    // 以前created干的事都扔setup里去干
    console.log('我是setup')
    console.log(this)
    // 默认的数据不是响应式的 需要用 reactive函数    reactive函数只能用在复杂类型上
    const strObj = reactive({
      name: 'zs',
      age: 18
    })
    const btnFunc = () => {
      strObj.age = strObj.age +1
    }
    // 模板里想要用到的数据和方法 都得return
    return {
      strObj,
      btnFunc
    }
  },
  beforeCreate () {
    console.log('我是create')
    console.log(this)
  }
}
</script>

<style lang="scss" scoped>

</style>
